<template>
  <div class="bg-white pt-5 px-5 rounded-md content box-border">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/system/role' }"
        >角色管理</el-breadcrumb-item
      >
    </el-breadcrumb>
    <el-divider />
    <div class="flex w-full justify-between box-border">
      <el-form :inline="true" :model="searchParams">
        <el-form-item label="角色名称">
          <el-input
            v-model="searchParams.name"
            placeholder="请输入角色名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="角色状态">
          <el-select
            v-model="searchParams.status"
            clearable
            placeholder="选择状态"
          >
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="button-group">
        <el-button
          type="primary"
          @click="
            $router.push({
              path: 'role/add',
            })
          "
          >新建角色</el-button
        >
      </div> -->
    </div>
    <el-container class="mt-4">
      <el-table
        :data="tableData.records"
        :header-cell-style="{ background: '#F4F4F4', color: '#000' }"
        border
        style="width: 100%"
      >
        <el-table-column prop="name" :align="'center'" label="角色名称" />
        <el-table-column prop="status" :align="'center'" label="角色状态">
          <template #default="scope">
            <div>{{ scope.row.status === 1 ? '启用' : '禁用' }}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-container>
    <div class="flex mt-4 w-full justify-end">
      <el-pagination
        v-show="tableData.total > 0"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { apiRolePageList } from '@/http/system/role';
  import { onMounted, reactive } from 'vue';
  // import { ElMessageBox } from 'element-plus';
  const searchParams = reactive({
    name: '',
    status: '',
    pageNum: 1,
    pageSize: 10,
  });
  onMounted(() => {
    // getTableData();
  });
  const tableData = reactive({
    records: [],
    total: 0,
    current: 1,
  });
  //获取表格数据
  const getTableData = async (): Promise<void> => {
    const res = await apiRolePageList(searchParams);
    Object.assign(tableData, res);
  };
  const onQuery = (): void => {
    searchParams.pageNum = 1;
    getTableData();
  };
  //分页size修改
  const handleSizeChange = (val: number): void => {
    searchParams.pageNum = 1;
    searchParams.pageSize = val;
    getTableData();
  };
  //分页-页数点击
  const handleCurrentChange = (val: number): void => {
    searchParams.pageNum = val;
    getTableData();
  };
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
    min-height: 100vh;
  }
</style>
